<template>
  <div class="login-page">
    <div class="back">
      <!-- .native绑定组件的原生事件，属于组件根元素 -->
      <!-- $router.back() 返回上一次访问路由，forward go -->
      <geek-icon @click.native="$router.go(-1)" name="esay-close"></geek-icon>
    </div>
    <h3 class="title">短信登录</h3>
    <!-- 表单 -->
    <van-form ref="form">
      <van-field name="mobile" placeholder="请输入手机号" v-model="form.mobile" :rules="rules.mobile"></van-field>
      <van-field name="code" placeholder="请输入验证码" v-model="form.code" :rules="rules.code">
        <template #button>
            <span class="send" @click="sendCode">{{second>0?second+'s再发送':"发送验证码"}}</span>
        </template>
      </van-field>
    </van-form>
    <van-button @click="login">登录</van-button>
  </div>
</template>
<script>
import { sendPhoneSMS, userLogin } from '@/api/login.js'
export default {
  name: 'LoginPage',
  methods: {
    async sendCode () {
      if (this.second > 0) return
      //   要想校验单个属性，必须在form对应的字段上添加上name
      await this.$refs.form.validate('mobile')

      const [err, data] = await sendPhoneSMS(this.form.mobile)
      if (err) return this.$toast.fail(err)

      console.log(data)
      //  没有错误，让这个发送按钮变成倒计时。 并且不能再进行点击
      this.second = 60
      this.timer = setInterval(() => {
        this.second--
        if (this.second <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    login () {
      // 如果你的手机号和验证码校验通过之后才能进行请求登录操作
      this.$refs.form.validate().then(async () => {
        // 请求登录操作。
        const [err, data] = await userLogin(this.form)
        if (err) return this.$toast.fail(err)
        // console.log(data)
        // 如果拿到数据了，需要 先存储Token？，其次跳转到你之前的页面。
        console.log('*******', data.data.data.refresh_token)
        this.$store.commit('user/setToken', data.data.data.token)
        this.$store.commit('user/setRefreshToken', data.data.data.refresh_token)

        // 跳转之前来的页面
        // console.log(this.$route.query.returnUrl)
        this.$router.replace(this.$route.query.returnUrl || '/')
      }, () => {})
    }
  },
  data () {
    return {
      timer: null,
      second: 0,
      form: {
        mobile: '',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请填写手机号' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对' }
        ],
        code: [
          { required: true, message: '请填写验证吗' },
          { pattern: /^\d{6}$/, message: '验证码是6个数字' }
        ]
      }
    }
  }
}
</script>
<style scoped lang="less">
.login-page {
  padding: 0 32px;
  .back {
    height: 60px;
    display: flex;
    align-items: center;
    .geek-icon {
      font-size: 20px;
      color: #ccc;
      position: relative;
      left: -15px;
    }
  }
  .title {
    font-size: 22px;
    line-height: 1;
    padding: 30px 0;
  }
  .van-cell {
    padding: 20px 0;
    &::after{
      left: 0;
      right: 0;
    }
  }
  .van-button {
    width: 100%;
    margin-top: 40px;
    height: 50px;
    color: #fff;
    font-size: 16px;
    border: none;
    background: linear-gradient(to right,#FF9999,#FFA179);
  }
}

.send {
    font-size: 12px;
    color: #A5A6AB;
}
</style>
